/**
* 注册
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, ScrollView, TextInput } from "react-native";
import { connect } from 'react-redux';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import { Colors, Dimens, ImageRes, CheckPhone } from '../../utils/Assets';
import { ProgressView } from '../custom/index'
import { Actions } from 'react-native-router-flux';
import Toast from 'react-native-root-toast';
const InitSeconds = 60
class RigisterView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            hidePassword: true,
            hideRePassword: true,
            codeButton: { text: '获取验证码', seconds: InitSeconds, color: '#ffffff' }
        }
    }

    componentDidMount() {

    }
    rigister() {
        if (CheckPhone(this.mobile)) {
            Toast.show('请输入正确的手机号', { position: Toast.positions.CENTER })
            return
        }
        if (!this.validate_code) {
            Toast.show('请输入验证码', { position: Toast.positions.CENTER })
            return
        }
        if (!this.password) {
            Toast.show('请输入密码', { position: Toast.positions.CENTER })
            return
        }
        if (!this.repassword) {
            Toast.show('请输入确认密码', { position: Toast.positions.CENTER })
            return
        }
        if (this.password != this.repassword) {
            Toast.show('两次密码输入不一致', { position: Toast.positions.CENTER })
            return
        }
        let params = {
            mobile: this.mobile,
            recommend_mobile: this.recommend_mobile,
            validate_code: this.validate_code,
            password: this.password,
            repassword: this.repassword
        }
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.POST_USER_REGISTER, params)).then(res => {
            if (res) {
                this.props.registerSuccess({ mobile: this.mobile, password: this.password })
                Actions.pop()
            }
            this.setState({ loading: false })
        })
    }
    componentWillUnmount() {
        this.timer && clearInterval(this.timer);
    }
    getCode() {
        if (this.state.codeButton.text != '获取验证码') return
        if (CheckPhone(this.mobile)) {
            Toast.show('请输入正确的手机号', { position: Toast.positions.CENTER })
            return
        }
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.POST_AUTH_CODE, { mobile: this.mobile })).then((res) => {
            if (res) {
                Toast.show('验证码发送成功', { position: Toast.positions.CENTER })
                this.timer = setInterval(() => {
                    let t = this.state.codeButton.seconds - 1;
                    if (t === 0) {
                        this.timer && clearInterval(this.timer);
                        this.setState({ codeButton: { text: '获取验证码', seconds: InitSeconds, color: '#ffffff' } })
                    } else {
                        this.setState({ codeButton: { text: '后可重新发送', seconds: t, color: Colors.textCommonGray } })
                    }
                }, 1000);
            }
            this.setState({ loading: false })
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1, backgroundColor: "#ffffff" }}>
                    <View style={{ marginHorizontal: 15, marginTop: 30 }}>
                        <Text style={{ fontSize: 15, color: "#333333" }}>推荐人手机号</Text>
                        <TextInput style={{ fontSize: 15, color: '#333333', height: 40 }}
                            onChangeText={(text) => {
                                this.recommend_mobile = text
                            }}
                            maxLength={11}
                            keyboardType={'number-pad'}
                            placeholderTextColor={'#999999'}
                            underlineColorAndroid={'transparent'}
                            placeholder={'请输入推荐人手机号(选填)'}
                        />
                        <View style={{ backgroundColor: Colors.bg_color, height: 1, flex: 1 }}></View>
                    </View>
                    <View style={{ marginHorizontal: 15, marginTop: 30 }}>
                        <Text style={{ fontSize: 15, color: "#333333" }}>手机号码</Text>
                        <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1 }}
                            onChangeText={(text) => {
                                this.mobile = text
                            }}
                            placeholderTextColor={'#999999'}
                            underlineColorAndroid={'transparent'}
                            maxLength={11}
                            keyboardType={'number-pad'}
                            placeholder={'请输入手机号'}
                        />
                        <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                    </View>
                    <View style={{ marginHorizontal: 15, marginTop: 30 }}>
                        <Text style={{ fontSize: 15, color: "#333333" }}>验证码</Text>
                        <View style={{ flexDirection: 'row', flex: 1 }}>
                            <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1 }}
                                onChangeText={(text) => {
                                    this.validate_code = text
                                }}
                                keyboardType={'number-pad'}
                                placeholderTextColor={'#999999'}
                                maxLength={6}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请输入验证码'}
                            />
                            <TouchableOpacity style={{ marginLeft: 15, justifyContent: 'center', backgroundColor: this.state.codeButton.seconds != InitSeconds ? "#F6F6F6" : "#378EFB", paddingHorizontal: 10, borderRadius: 5, marginBottom: 5 }} activeOpacity={0.8} onPress={() => {
                                this.getCode()
                            }} disabled={this.state.codeButton.seconds != InitSeconds}>
                                <Text style={{ fontSize: 15, color: this.state.codeButton.color }}>
                                    {this.state.codeButton.seconds != InitSeconds && <Text style={{}}>{this.state.codeButton.seconds + 'S'}</Text>}
                                    {this.state.codeButton.text}
                                </Text>
                            </TouchableOpacity>
                        </View>
                        <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                    </View>
                    <View style={{ marginHorizontal: 15, marginTop: 30 }}>
                        <Text style={{ fontSize: 15, color: "#333333" }}>密码</Text>
                        <View style={{ flexDirection: 'row', flex: 1 }}>
                            <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1 }}
                                onChangeText={(text) => {
                                    this.password = text
                                }}
                                placeholderTextColor={'#999999'}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请输入密码'}
                                secureTextEntry={this.state.hidePassword}
                            />
                            <TouchableOpacity style={{ marginLeft: 15, justifyContent: 'center' }} activeOpacity={0.8} onPress={() => {
                                this.setState({ hidePassword: !this.state.hidePassword })
                            }}>
                                <Image style={{ width: 23, height: 12, alignSelf: 'center' }} source={this.state.hidePassword ? ImageRes.hide_password : ImageRes.show_password}></Image>
                            </TouchableOpacity>
                        </View>
                        <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                    </View>
                    <View style={{ marginHorizontal: 15, marginTop: 30 }}>
                        <Text style={{ fontSize: 15, color: "#333333" }}>确认密码</Text>
                        <View style={{ flexDirection: 'row', flex: 1 }}>
                            <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1 }}
                                onChangeText={(text) => {
                                    this.repassword = text
                                }}
                                placeholderTextColor={'#999999'}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请输入确认密码'}
                                secureTextEntry={this.state.hideRePassword}
                            />
                            <TouchableOpacity style={{ marginLeft: 15, justifyContent: 'center' }} activeOpacity={0.8} onPress={() => {
                                this.setState({ hideRePassword: !this.state.hideRePassword })
                            }}>
                                <Image style={{ width: 23, height: 12, alignSelf: 'center' }} source={this.state.hideRePassword ? ImageRes.hide_password : ImageRes.show_password}></Image>
                            </TouchableOpacity>
                        </View>
                        <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                    </View>
                    <TouchableOpacity style={{ marginTop: 50, backgroundColor: '#378EFB', justifyContent: 'center', marginHorizontal: 15, paddingVertical: 15, borderRadius: 5 }} activeOpacity={0.8} onPress={() => {
                        this.rigister()
                    }}>
                        <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center' }}>注册</Text>
                    </TouchableOpacity>
                </ScrollView>
                <ProgressView show={this.state.loading} />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.bg_color,
        paddingBottom: Dimens.isIPhoneX ? 15 : 0,
        flex: 1
    }
});
function mapStateToProps(state) {
    return {
        userInfo: state.auth.userInfo
    }
}
const ExportView = connect(mapStateToProps)(RigisterView);
module.exports.RigisterView = ExportView
